import * as echarts from 'echarts'
import { useEffect, useRef } from 'react';

// 柱状图组件
// 1.功能代码放在这个组件中
// 2.可变部分抽象成props参数

const BarChart = ({ title }) => {
    const chartRef = useRef(null)

    useEffect(() => {
        // 保证dom可用 才进行图表渲染
        // 获取要渲染图标的dom节点
        const chartDom = chartRef.current
        // 图标初始化 生成图表实例对象
        const myChart = echarts.init(chartDom);

        const option = {
            title: {
                text: title
            },
            xAxis: {
                type: 'category',
                data: ['Vue', 'React', 'Angular']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [10, 40, 70],
                    type: 'bar'
                }
            ]
        };
        // 使用图标参数完成图标的渲染
        option && myChart.setOption(option);
    }, [])

    return <div ref={chartRef} style={{ width: '500px', height: '400px' }}></div>
}

export default BarChart